<template>
 <side-bar ref="sidebar">
    <my-div>
        <!--<head title="AtoX" :back="false" bgcolor="rgba(70,120,245,1)">-->
        <!---->
        <!--</head>-->
        <my-div day_bg="rgba(70,120,245,1)" night_bg="rgba(192,97,0,1)" class="bgimgheader">
            <div style="display: flex;">
                <div style="align-items: flex-start" @click="toggleSidebar">
                    <image style="width: 36px;height: 30px" :src="`root:img/${theme}/my/sidebar@2x.png`"></image>
                </div>
                <div style="align-items: flex-end;position: absolute;top: 0;right: 0;">
                    <image style="width: 36px;height: 36px"  :src="`root:img/${theme}/home/tixing@2x.png`"></image>
                </div>
            </div>
            <div class="headerphothstylebox">
                <!-- <div class="photobox"><image src="root:img/logo.png" style="border-radius:50%;width:100px;height: 100px;" alt=""></image></div> -->
                <div class="centerstyle">
                    <text class="usename">Airpay Counter</text>
                    <text class="say">Image Life Design</text>
                </div>
                <div @click="toggle_theme">
                    <my-text :text="theme_mode" class="goodday"> </my-text>
                </div>

            </div>
        </my-div>

        <div class="choosemoneyway">
            <my-div day_bg="#f1f1f1" night_bg="rgba(146,79,10,1)" class="account">
                <div class="smallstyle">
                    <image :src="`root:img/${theme}/home/zhuanru@2x.png`" style="width:44px;height:44px;margin-left: 93px;"></image>
                    <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.coin')" class="account-name">充币</my-text>
                </div>
                <div class="smallstyle">
                    <image :src="`root:img/${theme}/home/zhuanchu@2x.png`" style="width:44px;height:44px;margin-left: 93px;"></image>
                    <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.point')" class="account-name">提币</my-text>
                </div>
                <div class="smallstyle">
                    <image :src="`root:img/${theme}/home/huazhuan@2x.png`" style="width:44px;height:44px;margin-left: 93px;"></image>
                    <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.transfer')" class="account-name">划转</my-text>
                </div>
            </my-div>
        </div>

        <!--<div class="aboutmy">-->
        <!---->
        <!---->
        <!---->
        <!--</div>-->
         <scroller class="scroller" :show-scrollbar="false">
            <my-div style="padding:10px 20px;margin-top: 50px;">
                <my-div class="zf">
                    <div class="zf-item-dec">
                        <image class="leftimg" src="root:img/my/zhanghu@2x.png"></image>
                    </div>
                    <div class="zf-item-dec" style="margin-left: 30px;">
                        <my-text :text="$t('trade.account')" class="zf-item-lab"></my-text>
                    </div>
                    <div class="zf-btn-rate">
                        <image class="rightimg" src="root:img/home/right@2x.png"></image>
                    </div>

                </my-div>
                <my-div day_bg="#f1f1f1" night_bg="rgba(55,55,55,1)" style="height: 1px"></my-div>

                <my-div class="zf">
                    <div class="zf-item-dec">
                        <image class="leftimg" src="root:img/my/dingdan@2x.png"></image>
                    </div>
                    <div class="zf-item-dec" style="margin-left: 30px;">
                        <my-text :text="$t('trade.order')" class="zf-item-lab"></my-text>
                    </div>
                    <div class="zf-btn-rate">
                        <image class="rightimg" src="root:img/home/right@2x.png"></image>
                    </div>

                </my-div>
                <my-div day_bg="#f1f1f1" night_bg="rgba(55,55,55,1)" style="height: 1px"></my-div>

                <my-div class="zf">
                    <div class="zf-item-dec">
                        <image class="leftimg" src="root:img/my/anquan@2x.png"></image>
                    </div>
                    <div class="zf-item-dec" style="margin-left: 30px;">
                        <my-text :text="$t('trade.safety_Center')" class="zf-item-lab"></my-text>
                    </div>
                    <div class="zf-btn-rate">
                        <image class="rightimg" src="root:img/home/right@2x.png"></image>
                    </div>

                </my-div>
            </my-div>
            <my-div day_bg="#f1f1f1" night_bg="#000" style="height: 30px;"></my-div>
            <my-div class="zf">
                <div class="zf-item-dec">
                    <image class="leftimg" src="root:img/my/kefu@2x.png"></image>
                </div>
                <div class="zf-item-dec" style="margin-left: 30px;">
                    <my-text :text="$t('trade.link_server')" class="zf-item-lab"></my-text>
                </div>
                <div class="zf-btn-rate">
                    <image class="rightimg" src="root:img/home/right@2x.png"></image>
                </div>

            </my-div>
            <my-div day_bg="#f1f1f1" night_bg="rgba(55,55,55,1)" style="height: 1px"></my-div>
            <my-div class="zf">
                <div class="zf-item-dec">
                    <image class="leftimg" src="root:img/my/women@2x.png"></image>
                </div>
                <div class="zf-item-dec" style="margin-left: 30px;">
                    <my-text :text="$t('trade.aboutwe')" class="zf-item-lab"></my-text>
                </div>
                <div class="zf-btn-rate">
                    <image class="rightimg" src="root:img/home/right@2x.png"></image>
                </div>

            </my-div>
            <my-div day_bg="#f1f1f1" night_bg="rgba(55,55,55,1)" style="height: 1px"></my-div>
            <my-div class="zf">
                <div class="zf-item-dec">
                    <image class="leftimg" src="root:img/my/yuyin@2x.png"></image>
                </div>
                <div class="zf-item-dec" style="margin-left: 30px;">
                    <my-text :text="$t('trade.language_settings')" class="zf-item-lab"></my-text>
                </div>
                <div class="zf-btn-rate">
                    <image class="rightimg" src="root:img/home/right@2x.png"></image>
                </div>

            </my-div>
            <my-div day_bg="#f1f1f1" night_bg="#000" style="height: 500px;margin-bottom:500px"></my-div>
        </scroller>
    </my-div>
     <tab-bar @tabTo="onTabTo" :pIndexKey="4"></tab-bar>
 </side-bar>
</template>
<style scoped>
    .bgimgheader{
        padding:100px 25px 0px;
        height: 410px;
    }
    .headerphothstylebox{
        display: flex;
        margin: 60px 20px;
        height: 105px;
        flex-direction: row;
        justify-content: space-between;
    }
    .photobox{
        width: 100px;
        height:100px;
    }
    .centerstyle{
        width: 300px;
        margin-left: 15px;
    }
    .usename{
        width: 258px;
        height: 38px;
        font-size: 36px;
        font-family: PingFang SC;
        margin-top: 10px;
        color: rgba(255,255,255,1);
    }
    .say{
        width: 252px;
        height: 25px;
        font-size: 24px;
        margin-top: 10px;
        font-family: PingFang SC;
        color: rgba(255,255,255,1);
    }
    .goodday{
        color: #ffffff;
        font-size: 30px;
        height: 60px;
        margin-top: 35px;
    }
    .choosemoneyway{
        margin-top: -60px;
    }
    .account{
        width: 690px;
        margin-left: 30px;
        height: 170px;
        /* box-shadow: 0px 3px 30px 0px rgba(70,120,245,0.15); */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-radius: 20px;
    }
    .account-name{
        width: 230px;
        text-align: center;
        font-size: 28px;
        font-family: PingFang SC;
        margin-top: 15px;
    }
    .smallstyle{
        width: 230px;
    }
    .aboutmy{
        height: 30px;
        width: 100%;
        margin-top:60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(233,233,233,1);
    }
    .leftimg{
        width: 40px;
        height: 40px;
        margin-left: 30px;
    }
    .rightimg{
        width: 17px;
        height: 32px;
        margin-right: 30px;
    }
    .zf{
        height: 110px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .zf-item-dec{
    }
    .zf-item-img{
        width: 50px;
    }
    .zf-item-lab{
        font-size: 28px;
    }
    .zf-btn-rate{
        position: absolute;
        right: 0;
    }

</style>
<script>
import SideBar from '../../component/sidebar.vue'
import TabBar from '../../component/tabbar.vue'
    export default {
        name: '',
        data() {
            return {
            }
        },
        components: {TabBar,SideBar},
        computed: {
            theme_mode(){
            return this.theme === 'day'?'夜间模式':'日间模式'
            }
        },
        watch: {},
        created() {},
        mounted() {},
        methods: {
            toggle_theme:function(){
                if(this.theme && this.theme === 'day'){
                    this.theme = 'night'
                }else{
                    this.theme = 'day'
                }
            },
            onTabTo(_result){
                const index = _result.data.key;
                this.$emit('page',index)
            },
             toggleSidebar(){
                this.$refs.sidebar.openLeftPopup()
            }

        }
    }
</script>


